import React from 'react'

// 需求: A和B位置要保持灵活 可以随时互换 Main固定的

const WrapperContainer = ({ children }) => {
  return (
    <div>
      {children[1]}
      <div>this is main</div>
      {children[0]}
    </div>
  )
}

const A = () => {
  return <div>this is A</div>
}

const B = () => {
  return <div>this is B</div>
}

class App extends React.Component {
  render () {
    return (
      <div>
        <WrapperContainer>
          <A />
          <B />
        </WrapperContainer>
      </div>
    )
  }
}

export default App